<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html >
<html lang="zh-CN">
  <head>
    <title>机柜测试</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="测试机柜,">
	<meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/jtopo-min.js"></script>
	 <script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/toolbar.js"></script>
     <script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/jquery.js"></script>
  	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <style type="text/css">
     		
	.contextmenu {
		border: 1px solid #aaa;
		border-bottom: 0;
		background: #eee;
		position: absolute;
		list-style:none;
		margin: 0;
		padding: 0;
		display: none;
	}
																			   
	.contextmenu li a {
		display: block;
		padding: 10px;
		border-bottom: 1px solid #aaa;
		cursor: pointer;
	}
	.contextmenu li a:hover {
		background: #fff;
	}
     </style>
  </head>
  <body>
    <div id="candiv" style="padding-top: 3%;" >
      	<ul id="contextmenu" class="contextmenu" style="display:none;">	
			<li><a>顺时针旋转</a></li>
			<li><a>逆时针旋转</a></li>	
			<li><a>更改颜色</a></li>
			<li><a>放大</a></li>
			<li><a>缩小</a></li>	
			<li><a>删除该节点</a></li>
		    </ul>
		 <ul id="link" class="contextmenu" style="display:none;">	
			<li><a>删除</a></li>
		    </ul>   
        <button  onclick="addcabinet()"  class="btn btn-primary btn-lg">新增机柜</button>
         <button  class="btn btn-primary btn-lg"  data-toggle="modal" 
   data-target="#myModal">新增服务器</button>
         <button onclick="savethis()"  class="btn btn-primary btn-lg">保存</button>
         <a href="${pageContext.servletContext.contextPath}/toloadCabinet" class="btn btn-primary" style="margin-left: 70%;">查看演示</a>
    <canvas id="canvas" width="1400" height="790" style="border: 1px solid rgb(68, 68, 68); cursor: default; background-color: rgb(238, 238, 238);">
     </canvas>   
   </div>
   <!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true" >
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
         		新增服务器
            </h4>
         </div>
         <div class="modal-body">
         <div style="padding-left: 3%;">
           ip:&nbsp;<input type="text" class="form-control" id="ip" width="300" onkeyup="this.value=this.value.replace(/[^\0-9]/i,'')">
         </div>
          </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal" id="closeModle">关闭
            </button>
            <button type="button" class="btn btn-primary" id="savenodefwq" onclick="dbSaveNode()">
           	  保存资料
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
  <script> 
        	//公用项目名
    		var pageContext='${pageContext.servletContext.contextPath}';
  			var canvas = document.getElementById('canvas');	
			var stage = new JTopo.Stage(canvas);
			var scene = new JTopo.Scene(stage);
			scene.background = './img/bg.jpg';
  
  			 //获取到机柜对象字符串
                var cabinet='${cabinet}';
                //获取到机柜对象集合
                  var cabinetArray='';
                if(cabinet!=''){
                cabinetArray=JSON.parse(cabinet);
                }
                debugger;
                //生成页面对象
                for(var i=0;i<cabinetArray.length;i++){
                  var x=parseInt(cabinetArray[i].x);
                  var y=parseInt(cabinetArray[i].y);
                  var w=parseInt(cabinetArray[i].w);
                  var h=parseInt(cabinetArray[i].h);
             
                  var node=new JTopo.Node();
                  node.setBound(x,y,w,h);
                  //node.dragable =false;
                  node.setImage(pageContext+'/img/'+cabinetArray[i].src);
                  if(cabinetArray[i].src!='jg.png'){
                   node.zIndex=20;
                  }
                  node.inLinks=cabinetArray[i].uuid;
                  scene.add(node);
                }
  
  
            function addcabinet(){
            var cabinet =new JTopo.Node();
            cabinet.setBound(100,100,298,600);
            cabinet.setImage('./img/jg.png');
            scene.add(cabinet);
            }
            
            function addnode(uuid){
		  node=new JTopo.Node();
		  debugger;
		     node.setBound(50,100,107,20);
		     node.setImage('./img/wanjet.png');
		     node.zIndex=20;
		     scene.add(node);
		      node.inLinks=uuid;
		     console.log(node);
            }
            
            /*  setInterval(function(){
                if(node.alarm == '二级告警'){
                    node.alarm = null;
                }else{
                    node.alarm = '二级告警';
                }
            }, 600); */
            //保存当前页面的所有节点
            function savethis(){
            debugger;
              //获取到当前页面对象
              var pageObj=scene.getDisplayedNodes();
              //声明一个对象容器 用来装每个节点的位置 和图标
               var nodeObj={uuid:"", type:"",x:"",y:"",w:"",h:"",text:"" ,src:""};
               //声明一个对象集合容器用来装对象
               var nodeArray=new Array();
               for(var i=0;i<pageObj.length;i++){
                nodeObj=null;
                nodeObj={uuid:"", type:"",x:"",y:"",w:"",h:"",text:"" ,src:""};
                 nodeObj.x=pageObj[i].x;
                 nodeObj.y=pageObj[i].y;
                 nodeObj.w=pageObj[i].width;
                 nodeObj.h=pageObj[i].height;
                 if(typeof(pageObj[i].image)!='undefined'){
								var beginsrc=pageObj[i].image.currentSrc;
								var beSplit=beginsrc.split("/");
								nodeObj.src=beSplit[beSplit.length-1];
						}
				nodeObj.uuid=pageObj[i].inLinks;
				nodeArray.push(nodeObj);		
               }
               var nodeStr=JSON.stringify(nodeArray);
               console.log(nodeStr);
               //将当前页面对象转化成 字符串
               $.ajax({
                url:'${pageContext.servletContext.contextPath}/saveCabinet',
                contentType:'application/json',
                type:'post',
                data:nodeStr,
                success:function(){
                alert("保存成功");
                }
               });
            }
            /**
               	保存资料按钮
               	点击后保存节点数据到数据库
               	成功后调用addnode方法
            */
           function dbSaveNode(){
            var ip=$("#ip").val();
            var uid=uuid();
          var savenode=  {uid:uid,"ip":ip};
          var nodedata=JSON.stringify(savenode);
            $.ajax({
              url:'${pageContext.servletContext.contextPath}/dbsavenode',
              type:'post',
              contentType:'application/json',
              data:nodedata,
              success:function(data){
               var dataObj=JSON.parse(data);
              if(dataObj.okis=="success"){
               addnode(uid);
               $("#closeModle").click();
              }
              }
            });
           }
           
           	function handler(event){
				if(event.button == 2){// 右键
					// 当前位置弹出菜单（div）
					$("#contextmenu").css({
						top: event.pageY,
						left: event.pageX
					}).show();	
				}
			}
			
			
			stage.click(function(event){
				if(event.button == 0){// 右键
					// 关闭弹出菜单（div）
					$("#link").hide();
				}
			});
						
			
           
           /* 右键菜单处理 */	
			$("#contextmenu a").click(function(){
				var text = $(this).text();
				if(text == '删除该节点'){
					scene.remove(currentNode);
					currentNode = null;
				}if(text == '撤销上一次操作'){
					currentNode.restore();
				}else{
					//currentNode.save();
				}
				
				if(text == '更改颜色'){
					currentNode.fillColor = JTopo.util.randomColor();
				}else if(text == '顺时针旋转'){
					currentNode.rotate += 0.5;
				}else if(text == '逆时针旋转'){
					currentNode.rotate -= 0.5;
				}else if(text == '放大'){
					currentNode.scaleX += 0.2;
					currentNode.scaleY += 0.2;
				}else if(text == '缩小'){
					currentNode.scaleX -= 0.2;
					currentNode.scaleY -= 0.2;
				}
				$("#contextmenu").hide();
			}
			
			);
			
			function linkhandler(event){
				if(event.button == 2){// 右键
					// 当前位置弹出菜单（div）
					$("#contextmenu").css({
						top: event.pageY,
						left: event.pageX
					}).show();	
				}
			}
			scene.mouseup(function(e){
				  	//判断节点是否实现了node这个类 //菜单删除功能
				if(e.target != null && e.target instanceof JTopo.Node){
				menuNode=e.target;
				menuNode.addEventListener('mouseup', function(event){
				currentNode = this;
				handler(event);
				});
		        };
			   }
			);
			
			stage.click(function(event){
				if(event.button == 0){// 右键
					// 关闭弹出菜单（div）
					$("#contextmenu").hide();
				}
			});
			
           
           
           function uuid() {
	    var s = [];
	    var hexDigits = "0123456789abcdef";
	    for (var i = 0; i < 36; i++) {
	        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
	        
	    }
	    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
	    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
	    s[8] = s[13] = s[18] = s[23] = "-";
	 
	    var uuid = s.join("");
	    return uuid;
	    }
	    
  </script>
  </body>
</html>
